<template>
    <div class="chat-gpt">
        <img class="chat-bj" src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/GPT_bj.png" alt="" />
        <div class="chat-header">
            <div class="left" @click="goIndex">
                <i class="el-icon-arrow-left"></i>
                <img class="left-log" src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/xzcs_logo.png" alt="" />
                小竹财税AI
            </div>
            <div class="right">
                <template v-if="!isLogin">
                    <i class="el-icon-user"></i>
                    <span @click="goLogin">登录/注册</span>
                </template>
                <template v-if="userInfo">
                    <el-popover placement="bottom-end" width="350" trigger="click" v-model="gnfkVisible">
                        <gnfk @close="gnfkVisible = false" @submit="gnfkSubmit"></gnfk>
                        <div slot="reference" style="cursor: pointer; padding-right: 15px">
                            <i class="el-icon-document-checked"></i>
                            功能反馈
                        </div>
                    </el-popover>
                    <!-- <nuxt-link
                        to="/download?m=2"
                        target="_blank"
                        class="gnfk"
                        style="cursor: pointer"
                    >
                        <img
                            src="~/assets/images/gpt/syhz.png"
                            style="width: 19px; height: 19px"
                            alt=""
                        />
                        招募城市代理
                    </nuxt-link> -->
                    <bilibiliUserPopover v-if="userInfo"></bilibiliUserPopover>
                    <!-- <el-dropdown @command="handleCommand">
                        <img :src="userInfo && userInfo.avatar" alt="" />
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="user">
                                {{ userInfo.nickname }}
                            </el-dropdown-item>
                            <el-dropdown-item
                                v-if="userInfo.is_gpt_vip == 1"
                                command="vip"
                            >
                                <div class="gpt_vip_time">
                                    <p>会员</p>
                                    {{ userInfo.gpt_vip_end_time_text }}到期
                                </div>
                            </el-dropdown-item>
                            <el-popover
                                placement="left"
                                width="200"
                                trigger="hover"
                            >
                                <img
                                    src="~/assets/images/wx-kefu-code.png"
                                    alt=""
                                    style="width: 174px; height: 174px"
                                />
                                <el-dropdown-item slot="reference" command="kf">
                                    <span>联系客服</span>
                                </el-dropdown-item>
                            </el-popover>
                            <el-dropdown-item command="logout"
                                >退出登录</el-dropdown-item
                            >
                        </el-dropdown-menu>
                    </el-dropdown> -->
                </template>
            </div>
        </div>
        <div class="main">
            <div class="session">
                <div class="new-session" @click="newSession">
                    <i class="el-icon-circle-plus-outline"></i>新建对话
                </div>
                <div v-if="userInfo" class="session-list">
                    <div v-for="(item, index) in sessionList" :key="index" class="session-item" :class="{
                        'session-item-active': sessionIndex == index,
                    }">
                        <!-- <i class="el-icon-chat-dot-round"></i> -->
                        <!-- <i class="el-icon-chat-dot-round"></i> -->
                        <img src="~/assets/images/gpt/ai-history-iocn.png" class="icon" alt="" />
                        <div @click="getHistory(item, index)">
                            {{ item.title }}
                        </div>
                        <el-popconfirm title="删除后无法恢复，是否继续删除？" @confirm="del_gpt_session(item, index)">
                            <i slot="reference" class="el-icon-delete"></i>
                        </el-popconfirm>
                    </div>
                </div>
                <div v-if="userInfo" class="ask-number">
                    <!-- <div v-if="userInfo.is_gpt_vip == 0" class="text1">
                        剩余次数：<span class="num">{{ gpt_ask_number }}</span>
                    </div>
                    <div v-if="userInfo.is_gpt_vip != 0" class="text1">
                        到期时间：{{ userInfo.gpt_vip_end_time_text }}
                    </div>
                    <span class="goLink" @click="set_payVipShow(true)"
                        >增加次数</span
                    > -->
                    <span class="goLink" @click="goMajor()">找专家</span>
                    <el-popover placement="top" width="300" trigger="hover">
                        <div class="app-code">
                            <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/gh_c91771a9da09_345.png"
                                alt="小竹财税APP" />
                            <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/wxhaoyoujiaqun.png?v=1"
                                alt="小竹财税APP" />
                        </div>
                        <div class="app-code-text">
                            <div>小程序</div>
                            <div>添加客服微信 备注进群</div>
                        </div>
                        <span slot="reference" class="goLink">体验移动版</span>
                    </el-popover>
                </div>
            </div>
            <div style="width: 100%">
                <div v-loading="loading" class="chat-list" ref="chatList">
                    <div class="chat-msg-style xzgpt-msg xzgpt-one">
                        <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/xzcs_logo.png" class="avatar"
                            alt="" />
                        <div class="msg">
                            <div :style="{
                                'font-size': '1.625rem',
                                color: '#333333',
                                'padding-bottom': '1.2rem',
                            }">
                                你好，我是小竹财税AI
                            </div>
                            <div style="color: #666666; padding-bottom: 1rem">
                                我是小竹财税开发的首个财税问答机器人，当然，我不仅懂财税，还能陪你聊天、写论文、预报天气，上知天文下知地理。快来体验吧。
                            </div>
                            <!-- <div class="new-wt-list">
                                你可以试着问我：
                                <div class="new-wt" @click="get_preface">
                                    <i class="el-icon-refresh">换一换</i>
                                </div>
                            </div> -->
                            <!-- <div class="wt-list">
                                <div
                                    v-for="(item, index) in tjAskList"
                                    :key="index"
                                    class="wt-item"
                                    @click="tjAsk(item)"
                                >
                                    <div class="wt-title">
                                        <img :src="item.pic" alt="" />{{
                                            item.title
                                        }}
                                    </div>
                                    <div class="wt-text">
                                        {{ item.content }}
                                    </div>
                                </div>
                            </div> -->
                        </div>
                    </div>
                    <template v-for="(item, index) in messageList">
                        <div v-if="item.type == 'user'" :key="index" class="chat-msg-style user-msg">
                            <img :src="userInfo && userInfo.avatar" class="avatar" alt="" />
                            <div class="msg">
                                {{ item.content }}
                            </div>
                        </div>
                        <template v-if="item.type == 'gpt'">
                            <div v-if="item.content == ''" class="chat-msg-style xzgpt-msg" :key="index">
                                <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/xzcs_logo.png"
                                    class="avatar" alt="" />
                                <div class="msg stop-text" style="
                                        display: flex;
                                        position: relative;
                                        padding-bottom: 2.5rem;
                                    " :style="{
                                        paddingBottom: item.isStop
                                            ? '1.5rem'
                                            : '2.5rem',
                                    }">
                                    {{
                                        item.isStop ? "已停止生成" : "正在思考"
                                    }}
                                    <div v-show="!item.isStop" class="typewriter">
                                        ...
                                    </div>
                                    <div v-if="item.loading" style="bottom: 8px; left: 31px" class="stop-message"
                                        @click="stopMessageCompletion(item)">
                                        停止生成
                                    </div>
                                </div>
                            </div>
                            <div v-else class="chat-msg-style xzgpt-msg" :key="index">
                                <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/xzcs_logo.png"
                                    class="avatar" alt="" />
                                <div class="right-con">
                                    <div class="msg">
                                        <VueMarkdown v-if="contentShow" :key="item.content">{{ item.content }}
                                        </VueMarkdown>
                                        <span v-show="item.loading">...</span>

                                        <div class="interactive-line">
                                            <div v-if="item.loading" class="stop-message stop-div"
                                                @click="stopMessageCompletion(item)">
                                                停止生成
                                            </div>
                                            <div v-if="item.isStop" class="stop-text stop-div"
                                                style="color: rgba(5, 7, 59, 0.5)">
                                                已停止生成
                                            </div>
                                            <div class="text">
                                                不满意？<span @click="goask(index)">找专家</span>
                                            </div>
                                            <i class="el-icon-connection" @click="clone(item.content)"></i>
                                            <img :src="item.like ? zan1 : zan0" alt=""
                                                @click="showFK($event, index, 1)" />
                                            <img style="transform: rotate(180deg)" :src="item.noLike ? zan1 : zan0"
                                                alt="" @click="showFK($event, index, 2)" />
                                        </div>
                                    </div>
                                    <div v-if="item.reference" class="reference-list">
                                        <div v-for="(itx) in item.reference.length > 3 && referenceMoreMessageId != item.messageId ? item.reference.slice(0, 3) : item.reference"
                                            :key="itx.documentTitle">
                                            <div class="reference-item" @click="goReference(itx)">
                                                <span>{{ extractTitleData(itx.documentTitle).title }}</span>
                                                <i class="el-icon-right"></i>
                                            </div>
                                        </div>

                                        <div v-if="item.reference.length > 3 && referenceMoreMessageId != item.messageId"
                                            class="xiala" @click="referenceMoreMessageId = item.messageId"><i
                                                class="el-icon-arrow-down"></i></div>
                                        <div v-if="referenceMoreMessageId == item.messageId" class="xiala"
                                            @click="referenceMoreMessageId = ''"><i class="el-icon-arrow-up"></i></div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </template>
                    <!-- <div class="chat-msg-style user-msg">
                <img :src="userInfo && userInfo.avatar" class="avatar" alt="" />
                <div class="msg">一款app设计，请针对设计方面做100字总结</div>
            </div>
            <div class="chat-msg-style xzgpt-msg">
                <img
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/xzcs_logo.png"
                    class="avatar"
                    alt=""
                />
                <div class="msg">
                    设计一款app需要考虑用户体验，包括界面设计、交互方式、功能设置等方面。首先需要明确用户需求和目标，
                    然后进行用户研究和竞品分析，确定设计风格和色彩搭配等元素。在界面设计中，
                    要注意布局合理、图标清晰、字体易读等问题，同时要考虑到不同设备的适配问题。交互方式应该简单明了，
                    易于操作，同时要注重反馈机制的设计，让用户能够及时了解操作结果。功能设置方面，要充分考虑用户需求和使用场景，
                    避免冗余和复杂性，提高用户的使用效率和满意度。总之，好的app设计应该以用户为中心，注重细节和实用性，让用户感到舒适和愉悦。
                    <div class="interactive-line">
                        <div class="text">
                            不满意？去小竹问答<span>提问</span>
                        </div>
                        <i class="el-icon-connection"></i>
                        <img src="../../assets/csjh/zan_0.png" alt="" />
                        <img
                            style="transform: rotate(180deg)"
                            src="../../assets/csjh/zan_0.png"
                            alt=""
                        />
                    </div>
                </div>
            </div>
            <div class="chat-msg-style xzgpt-msg">
                <img
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/xzcs_logo.png"
                    class="avatar"
                    alt=""
                />
                <div class="msg" style="display: flex">
                    正在思考
                    <div class="typewriter">...</div>
                </div>
            </div> -->
                </div>
                <div v-if="messageList.length == 0" class="new-wt" @click="get_preface">
                    <i class="el-icon-refresh">换一换</i>
                </div>
                <el-carousel v-if="messageList.length == 0" class="wt-list2-carousel" height="108px" arrow="never"
                    indicator-position="none" :interval="5000">
                    <el-carousel-item>
                        <div class="wt-list2">
                            <div class="wt-item2" v-for="(item, index) in tjAskList.slice(0, 3)" :key="index"
                                @click="tjAsk(item)">
                                <div class="wt-title">
                                    <img :src="item.pic" alt="" />{{
                                        item.title
                                    }}
                                </div>
                                <div class="wt-text">
                                    {{ item.content }}
                                </div>
                            </div>
                        </div>
                    </el-carousel-item>
                    <el-carousel-item>
                        <div class="wt-list2">
                            <div class="wt-item2" v-for="(item, index) in tjAskList.slice(3)" :key="index"
                                @click="tjAsk(item)">
                                <div class="wt-title">
                                    <img :src="item.pic" alt="" />{{
                                        item.title
                                    }}
                                </div>
                                <div class="wt-text">
                                    {{ item.content }}
                                </div>
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>

                <div class="chat-input" @keydown="keydown">
                    <div v-if="!isLogin" class="nologin">
                        <span @click="goLogin">登录/注册</span>&nbsp;后使用
                    </div>
                    <el-input v-else type="textarea" :rows="2" placeholder="请输入内容" :autosize="false" resize="none"
                        v-model="textarea">
                    </el-input>
                    <!-- <div class="submit" @click="sendMessage">发送</div> -->
                    <div v-if="checkMessageSwitch" class="submit" @click="checkMessage">
                        <i class="el-icon-s-promotion"></i>
                    </div>
                    <div v-else class="submit" @click="
                        stopMessageCompletion(
                            messageList[messageList.length - 1]
                        )
                        ">
                        <i class="el-icon-caret-right"></i>
                    </div>
                </div>
                <div class="chat-footer">
                    服务生成的所有内容均由人工智能模型生成，其生成内容的准确性和完整性无法保证，不代表我们的态度或观念。
                </div>
            </div>
        </div>

        <msgfk v-if="msgfkShow" :x="eventX" :y="eventY" :isLike="is_like" @close="msgfkShow = false"
            @submit="msgfkSubmit">
        </msgfk>

        <el-dialog title="购买会员" :visible.sync="dialogVisible" width="558px" :modal-append-to-body="false" center
            custom-class="gpt-dialog">
            <div class="goumai">
                <div class="comboList">
                    <div v-for="(item, index) in comboList" :key="index" class="combo-item"
                        :class="{ 'combo-item-active': comboIndex == index }" @click="comboIndex = index">
                        <div class="num">
                            <template v-if="item.day == 1">
                                1<span>天</span>
                            </template>
                            <template v-if="item.day == 30">
                                1<span>个月</span>
                            </template>
                            <template v-if="item.day == 365">
                                12<span>个月</span>
                            </template>
                        </div>
                        <div class="tj">
                            特价<span>{{ item.amount }}</span>元
                        </div>
                        <div class="yj">原价{{ item.face_value }}元</div>
                        <img v-show="index == 1" src="~/assets/images/userCenter/hot.png" alt="热销" />
                    </div>
                </div>
                <div class="flex" style="justify-content: space-around">
                    <div class="payment flex-center-align pointer" :class="{
                        paymentCurrent: select_pay_type == item.pay_type,
                    }" v-for="(item, index) in paymentList" :key="index" @click="select_pay_type = item.pay_type">
                        <img src="~/assets/images/service/pay_check1.png" class="selectIcon"
                            v-if="select_pay_type == item.pay_type" />
                        <img src="~/assets/images/service/pay_check0.png" class="selectIcon"
                            v-if="select_pay_type != item.pay_type" />
                        <img :src="item.icon" class="icon" alt="" />

                        <span>{{ item.name }}</span>
                    </div>
                </div>
                <div class="but" @click="goPay">立即开通会员</div>
                <div class="xieyi">
                    支付即同意<a target="_blank" href="https://api.xiaozhucaishui.com/xieyi/pay.html">《支付协议》</a>
                </div>
            </div>
        </el-dialog>

        <div class="wxPay">
            <el-dialog :visible.sync="wxPayShow" :modal-append-to-body="false" width="370px">
                <div class="wxPay-price">
                    ￥<span v-if="comboList.length > 0" class="fz30">{{
                        comboList[comboIndex].amount
                        }}</span>
                </div>
                <div class="ErwmToast">
                    <div class="erwm">
                        <iframe class="iframe mt20" :src="iframeSrc" naem="newPage" />
                    </div>
                    <div class="flex-center-align mt20">
                        <img src="~/assets/images/service/icon_pay1.png" class="icon" alt="" />
                        <div class="fz22 c333">微信支付</div>
                    </div>
                </div>
            </el-dialog>
        </div>

        <div style="opacity: 0; height: 0" id="copycode">{{ cloneText }}</div>
        <div v-html="payHtml"></div>

        <!-- 浮动弹窗 -->
        <no-ssr>
            <!-- <dynamicPopUps></dynamicPopUps> -->
            <payVip :show="payVipShow"></payVip>
        </no-ssr>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";

import { chat_run, get_chatmsg } from "@/assets/api/indexApi";

import { submitFeedback, logout } from "@/assets/api/indexApi";

import gnfk from "@/components/gpt/gnfk.vue";
import msgfk from "@/components/gpt/msgfk.vue";

import zan0 from "@/assets/images/csjh/zan_0.png";
import zan1 from "@/assets/images/csjh/zan_1.png";

import dynamicPopUps from "@/components/index/dynamicPopUps.vue";
import bilibiliUserPopover from "@/components/index/bilibiliUserPopover.vue";
import {
    getSourceDetail,
    ask,
    checkMessagePending,
    gpt_submit_evaluate,
    getApiToken,
    gpt_ask_new,
    gpt_ask_show,
    getComboList,
    goPay,
    add_gpt_session,
    del_gpt_session,
    get_gpt_session,
    chatHistory,
    get_preface,
    stopMessageCompletion,
} from "@/assets/api/GPT";
import { userGetUserInfo, getanalysedata2 } from "@/assets/api/indexApi";
import { extractTitleData } from "@/assets/utils/utils";

import payVip from "@/components/nav/payVip";

import VueMarkdown from "vue-markdown";

import io from "socket.io-client";
var num = 0;
export default {
    components: {
        gnfk,
        msgfk,
        dynamicPopUps,
        payVip,
        bilibiliUserPopover,
        VueMarkdown,
    },
    head() {
        return {
            title: "小竹财税AI-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹,财税,小竹财税,小竹智能GPT,小竹财税AI",
                },
            ],
        };
    },
    data() {
        return {
            extractTitleData: extractTitleData,
            chatList: [],
            loading: false,
            textarea: "",
            isLogin: false,
            gnfkVisible: false,

            eventX: "",
            eventY: "",
            is_like: 1,
            msgfkShow: false,

            sourceObj: null,

            messageList: [],

            cloneText: "",

            messageListIndex: 0,

            zan0: zan0,
            zan1: zan1,

            tjAskList: [],

            gpt_ask_number: 0,

            dialogVisible: false,
            comboList: [],
            comboIndex: 0,
            select_pay_type: 2, //选择支付宝还是微信支付
            paymentList: [
                {
                    name: "支付宝",
                    pay_type: 2,
                    icon: require("~/assets/images/service/pay_zfb.png"),
                },
                {
                    name: "微信",
                    pay_type: 1,
                    icon: require("~/assets/images/service/pay_wx.png"),
                },
            ],
            payHtml: "",
            iframeSrc: "", //微信二维码地址
            wxPayShow: false,

            sessionList: [],
            sessionIndex: null,

            loading: false,

            checkMessageSwitch: true,

            typingMessageObj: {},
            typingMessageIndex: {},

            loadingText: "",
            loadingTextIndex: "",

            timer: null,

            contentShow: true,

            referenceMoreMessageId: ''
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
            goeasyObj: (state) => state.goeasyObj,
            payVipShow: (state) => state.payVipShow,
        }),
    },
    mounted() {
        let token = localStorage.getItem("token");
        if (token) this.isLogin = true;
        // this.getSourceDetail();
        let that = this;
        this.getUserInfo2().then((user) => {
            // that.gpt_ask_show();
            that.getComboList();
            that.get_gpt_session();
            that.initWebsocket();
        });
        this.get_preface();
    },
    methods: {
        ...mapMutations("common", ["setuserInfo", "set_payVipShow"]),
        ...mapActions("common", ["getUserInfo2"]),

        newSession() {
            if (this.timer) {
                clearTimeout(this.timer);
                this.timer = null;
                this.checkMessageSwitch = true;
            }
            if (this.userInfo) {
                this.sessionIndex = null;
                this.messageList = [];
                getanalysedata2({
                    m_id: 12,
                    type: 1,
                    describe: "新建对话",
                    code: "PK2",
                });
            } else {
                this.$router.push({
                    path: "/login",
                    url: window.location.pathname + window.location.search,
                });
            }
        },

        initWebsocket() {
            console.log("initWebsocket...");
            var that = this;
            var uniIds = [];
            const socket = io("wss://xzcsgpt.xzcs2022.com", {
                query: {},
                transports: ["websocket", "polling"],
                timeout: 5000,
            });
            socket.on("connect", () => {
                console.log("websocket 已连接");
                socket.on("loginSuccess", (message) => {
                    console.log("ws loginSuccess", message);
                });
                socket.on("loginFail", (message) => {
                    console.log("ws loginFail", message);
                });
                socket.on("onMessageCompletion", (message) => {
                    // console.log("ws onMessageCompletion", message);
                    message = JSON.parse(message);
                    if (uniIds.indexOf(message.uniId) > -1) return;
                    if (!that.loadingText) that.loadingTextIndex = 0;
                    that.loadingText += message.data;
                    // if (that.typingMessageObj.hasOwnProperty(message.messageId)) {
                    // 	that.typingMessageObj[message.messageId] += message.data
                    // } else {
                    // 	that.typingMessageObj[message.messageId] = message.data
                    // 	that.typingMessageIndex[message.messageId] = 0
                    // }
                    uniIds.push(message.uniId);
                    if (that.loadingTextIndex == 0) that.initTypingInterval();
                    // that.scrollToBottom(200)
                });
                socket.emit(
                    "login",
                    JSON.stringify({
                        clientId: this.userInfo.id,
                    })
                );
            });
            socket.on("error", (msg) => {
                console.log("ws error", msg);
            });
        },

        initTypingInterval() {
            if (this.loadingText.length <= this.loadingTextIndex) {
                console.log("没值了等会");
            } else {
                this.messageList[this.messageList.length - 1].content =
                    this.loadingText.substring(0, this.loadingTextIndex++);
            }
            if (
                this.$refs.chatList.scrollTop +
                this.$refs.chatList.clientHeight +
                1 >=
                this.$refs.chatList.scrollHeight
            ) {
                // 在这里执行你的操作
                this.scrollBottom();
            }
            setTimeout(() => {
                if (this.messageList[this.messageList.length - 1].loading)
                    this.initTypingInterval();
            }, 24);
        },

        // 获取随机问答
        async get_preface() {
            const res = await get_preface({});
            if (res.code == 1) {
                this.tjAskList = res.data;
            }
        },

        async add_gpt_session(title = null, is = false) {
            if (!title) return;
            const res = await add_gpt_session({ title: title });
            if (res.code == 1) {
                this.get_gpt_session();
                this.sessionIndex = 0;
                if (is) this.sendMessage();
            }
        },

        async get_gpt_session() {
            const res = await get_gpt_session({});
            if (res.code == 1) {
                this.sessionList = res.data;
            }
        },

        async del_gpt_session(item, index) {
            const res = await del_gpt_session({
                id: item.id,
            });
            if (res.code == 1) {
                this.get_gpt_session();
                if (this.sessionIndex == index) {
                    this.sessionIndex = null;
                    this.messageList = [];
                }
            }
        },

        async getComboList() {
            const res = await getComboList({});
            if (res.code == 1) {
                this.comboList = res.data;
            }
        },

        async getSourceDetail() {
            const res = await getSourceDetail({
                sourceId: "67ff5f46f217fb3d0f3225b7",
            });
            this.sourceObj = res.data;
        },

        checkMessage() {
            if (!this.checkMessageSwitch) return;
            this.checkMessageSwitch = false;
            // 不在区分会员非会员
            // if (this.gpt_ask_number == 0 && this.userInfo.is_gpt_vip == 0) {
            //     this.$message({
            //         message: "您的提问次数不足",
            //         type: "warning",
            //     });
            //     this.textarea = "";
            //     this.$nextTick(() => {
            //         this.checkMessageSwitch = true;
            //     });
            //     return;
            // }

            // if (
            //     this.messageList.length > 0 &&
            //     this.messageList[this.messageList.length - 1].type == "gpt" &&
            //     this.messageList[this.messageList.length - 1].content == ""
            // )
            //     return;

            if (this.messageList.length == 0) {
                this.add_gpt_session(this.textarea, true);
            } else this.sendMessage();
        },

        async sendMessage() {
            if (this.textarea == "") {
                this.$message({
                    message: "请输入提问内容",
                    type: "warning",
                });
                this.$nextTick(() => {
                    this.checkMessageSwitch = true;
                });
                return;
            }
            getanalysedata2({
                m_id: 12,
                type: 1,
                describe: "提问:" + this.textarea,
                code: "PK1",
            });
            this.messageList.push({
                content: this.textarea,
                type: "user",
            });
            this.scrollBottom();
            let that = this;
            setTimeout(() => {
                that.sendMessageNext();
            }, 400);
        },

        async sendMessageNext(is = true) {
            if (is) {
                this.messageList.push({
                    content: "",
                    like: false,
                    noLike: false,
                    type: "gpt",
                    loading: true,
                    messageId: "",
                    isStop: false,
                });
                this.loadingText = "";
                this.$nextTick(() => {
                    this.scrollBottom();
                });
            }
            const res = await ask({
                chatEngine: "6594f6c3cb9fe6594711faa4",
                clientId: "" + this.userInfo.id,
                // hitThreshold: 98,
                question: this.textarea.trim(),
                sourceId: "67ff5f46f217fb3d0f3225b7",
                sessionId:
                    this.sessionIndex == null
                        ? ""
                        : this.sessionList[this.sessionIndex].session_id,
                // unhitThreshold: 10,
            });

            if (res.status == 0) {
                this.textarea = "";
                this.checkMessageSwitch = false;
                this.timer = setTimeout(() => {
                    num = 0;
                    this.checkMessagePending(
                        res.data.robotReply[0].uniqueId,
                        res.data.question
                    );
                }, 1500);
                this.messageList[this.messageList.length - 1].messageId =
                    res.data.robotReply[0].uniqueId;
            } else {
                this.$nextTick(() => {
                    this.checkMessageSwitch = true;
                });
                let token = await getApiToken();
                if (token) this.sendMessageNext(false);
                else {
                    console.log("授权失效，请联系技术人员");
                }
            }
        },

        // 停止提问
        async stopMessageCompletion(item) {
            const res = await stopMessageCompletion({
                messageId: item.messageId,
            });
            if (res.errno == 0) {
                item.isStop = true;
                item.loading = false;
                this.checkMessageSwitch = true;
            }
        },

        // 轮询提问
        async checkMessagePending(messageId, question) {
            if (num++ > 1000) {
                this.messageList[this.messageList.length - 1].content =
                    "回答超时";
                return;
            }
            const res = await checkMessagePending({
                messageId: messageId,
            });
            if (this.checkMessageSwitch) {
                console.log("不知道因为什么停止轮询", res);
                this.gpt_ask_new(question);
                return;
            }
            if (res.data && res.data.reply) {
                for (let i = 0; i < this.messageList.length; i++) {
                    if (
                        this.messageList[i].messageId == res.data.reply.uniqueId
                    ) {
                        this.messageList[i].content =
                            res.data.reply.text.content;
                        this.messageList[i].loading = false;
                        if (res.data.reply.sourceSentences && res.data.reply.sourceSentences.list.length > 0) {
                            this.messageList[i].reference = res.data.reply.sourceSentences.list
                        }
                    }
                }
                num = 0;
                this.gpt_ask_new(question);
                this.contentShow = false;

                this.$nextTick(() => {
                    this.contentShow = true;
                    this.scrollBottom();
                    this.checkMessageSwitch = true;
                });
            } else {
                this.timer = setTimeout(() => {
                    this.checkMessagePending(messageId, question);
                }, 1000);
            }
        },

        // 获取历史消息
        async getHistory(item, index) {
            this.loading = true;
            this.sessionIndex = index;
            const res = await chatHistory({
                clientId: "" + this.userInfo.id,
                sourceId: "67ff5f46f217fb3d0f3225b7",
                sessionId: item.session_id,
                pageSize: 30,
            });
            if (res.errno == 0) {
                this.messageList = [];
                res.data.reverse();
                for (let item of res.data) {
                    this.messageList.push({
                        content: item.question,
                        type: "user",
                    });
                    this.messageList.push({
                        content: item.robotReply[0].text.content,
                        like: false,
                        noLike: false,
                        type: "gpt",
                        loading: false,
                        messageId: item.robotReply[0].uniqueId,
                        isStop:
                            item.stopMessageCompletion &&
                                item.stopMessageCompletion == 1
                                ? true
                                : false,
                        reference: item.robotReply[0].sourceSentences && item.robotReply[0].sourceSentences.list.length > 0 ? item.robotReply[0].sourceSentences.list : ''
                    });
                    console.log(this.messageList)
                }
                this.$nextTick(() => {
                    this.loading = false;
                    this.scrollBottom();
                });
            } else {
                let token = await getApiToken();
                if (token) this.getHistory(item, index);
                else {
                    console.log("授权失效，请联系技术人员");
                }
            }
        },

        // 消耗并重新获取提问次数
        async gpt_ask_new(question) {
            // const res = await gpt_ask_new({
            //     content: question,
            // });
            // this.gpt_ask_show();
        },

        async gpt_ask_show() {
            const res = await gpt_ask_show({});
            if (res.code == 1) {
                this.gpt_ask_number = res.data.gpt_ask_number;
            }
        },

        showFK(event, index, is_like) {
            this.messageList[index].like = false;
            this.messageList[index].noLike = false;

            this.eventX = event.x - 247 + "px";
            if (window.innerHeight - event.y < 400)
                this.eventY = event.y - 290 + "px";
            else this.eventY = event.y + 22 + "px";
            this.msgfkShow = true;
            this.is_like = is_like;
            this.messageListIndex = index;
        },

        async msgfkSubmit(tabs, content) {
            let evaluate = "";
            for (let item of tabs) {
                if (item.checked) evaluate += item.name + ",";
            }
            const res = await gpt_submit_evaluate({
                is_like: this.is_like,
                evaluate: evaluate,
                content: content,
            });
            if (res.code == 1) {
                this.msgfkShow = false;
                if (this.is_like == 1)
                    this.messageList[this.messageListIndex].like = true;
                else this.messageList[this.messageListIndex].noLike = true;

                this.$message({
                    message: res.data,
                    type: "success",
                });
            }
        },

        // 功能反馈
        async gnfkSubmit(content) {
            if (!content) {
                this.$message({
                    message: "请输入反馈内容",
                    type: "warning",
                });
                return;
            }
            const res = await submitFeedback({
                content: content,
            });
            if (res.code == 1) {
                getanalysedata2({
                    m_id: 12,
                    type: 1,
                    describe: "功能反馈",
                    code: "PK4",
                });
                this.gnfkVisible = false;
                this.$message({
                    message: "您的反馈已提交",
                    type: "success",
                });
            }
        },

        handleCommand(command) {
            if (command == "user") {
                // this.$router.push({
                //     path: "/MyQuiz",
                // });
            }
            if (command == "kf") {
                // window.location.href = "https://www.xzcs2022.com/chatlink.html";
            }
            if (command == "logout") {
                this.$confirm("是否退出登录?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    this.logout();
                });
            }
        },

        async logout() {
            const id = this.userInfo.id;
            const res = await logout({});
            this.$message("已退出登录");
            this.setuserInfo(null);
            localStorage.removeItem("token");
            localStorage.removeItem("userInfo");
            localStorage.removeItem("closeServiceOne");
            this.isLogin = false;
            this.goeasyObj.pubsub.unsubscribe({
                channel: id,
                onSuccess: function () { },
                onFailed: function (error) { },
            });
        },

        // 滚动到底部
        scrollBottom() {
            this.$nextTick(() => {
                this.$refs.chatList.scrollTop =
                    this.$refs.chatList.scrollHeight;
            });
        },

        keydown(e) {
            if (!e.shiftKey && e.keyCode == 13) {
                e.cancelBubble = true; //ie阻止冒泡行为
                e.stopPropagation(); //Firefox阻止冒泡行为
                e.preventDefault(); //取消事件的默认动作*换行
                //以下处理发送消息代码
                if (e.keyCode == 13) {
                    this.checkMessage();
                }
            }
        },

        // 前往登录
        goLogin() {
            window.location.href =
                "/login?url=" +
                window.location.pathname +
                window.location.search;
        },

        goask(index) {
            let routeData = this.$router.resolve({
                path: "/cswd/zjwd/1",
            });
            window.open(routeData.href, "_blank");
            // this.$router.push({
            //     path: "/Cswd/Ask",
            // });
        },

        goIndex() {
            this.$router.push({
                path: "/",
            });
        },

        // 复制
        clone(text) {
            this.cloneText = text;

            this.$nextTick(() => {
                const range = document.createRange();
                range.selectNode(document.getElementById("copycode")); //获取复制内容的 id 选择器
                const selection = window.getSelection(); //创建 selection对象
                if (selection.rangeCount > 0) selection.removeAllRanges(); //如果页面已经有选取了的话，会自动删除这个选区，没有选区的话，会把这个选取加入选区
                selection.addRange(range); //将range对象添加到selection选区当中，会高亮文本块
                document.execCommand("copy"); //复制选中的文字到剪贴板
                selection.removeRange(range); // 移除选中的元素

                this.$message({
                    message: "复制成功",
                    type: "success",
                });
            });
        },

        tjAsk(item) {
            this.textarea = item.content;
            this.checkMessage();
        },

        async goPay() {
            if (this.comboIndex == 0 && this.userInfo.onemonth_vip == 1) {
                this.$alert(
                    "本月已体验会员1天，升级为月度会员，尽享更多精彩！",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        closeOnClickModal: true,
                    }
                );
                return;
            }
            let params = {
                pay_type: this.select_pay_type,
                id: this.comboList[this.comboIndex].id,
                source: "web",
            };

            const res = await goPay(params);
            if (res.code == 1) {
                if (this.select_pay_type == 2) {
                    this.payHtml = res.data;
                    this.$nextTick(() => {
                        document.forms[0].submit();
                    });
                } else {
                    this.wxPayShow = true;
                    this.iframeSrc = res.data;
                    this.getWxPayType();
                }
            }
        },

        goMajor() {
            getanalysedata2({
                m_id: 12,
                type: 1,
                describe: "找专家",
                code: "PK3",
            });
            this.$router.push({
                path: "/cswd/zjwd/1",
            });
        },

        // 前往相关链接
        goReference(item) {
            let res = extractTitleData(item.documentTitle)
            console.log(res)
            let path = ''
            switch (res.documentType) {
                case 'qa':
                    path = `/quizdata/${res.id}.html`
                    break;
                case 'policy':
                    path = `/ssfgk/${res.id}.html`
                    break;
                case 'norm':
                    path = `/kjfgk/${res.id}.html`
                    break;
            }
            if (path) {
                const route = this.$router.resolve({ path: path });
                window.open(route.href, '_blank');
            }
        },

        async getWxPayType() {
            if (!this.wxPayShow) return;
            // const res = await gpt_ask_show({});
            // if (res.code == 1) {
            //     if (res.data.gpt_ask_number > this.gpt_ask_number) {
            //         this.wxPayShow = false;
            //         this.dialogVisible = false;
            //         this.gpt_ask_number = res.data.gpt_ask_number;
            //     } else {
            //         setTimeout(() => {
            //             this.getWxPayType();
            //         }, 3000);
            //     }
            // }

            const res = await userGetUserInfo({});
            if (res.code == 1) {
                if (
                    this.userInfo.gpt_vip_end_time < res.data.gpt_vip_end_time
                ) {
                    this.wxPayShow = false;
                    this.dialogVisible = false;
                    this.setuserInfo(res.data);
                    this.$message({
                        message: "会员购买成功",
                        type: "success",
                    });
                } else {
                    setTimeout(() => {
                        this.getWxPayType();
                    }, 3000);
                }
            }
        },
    },
};
</script>
<style>
#meiqia-container {
    position: relative;
    z-index: 999;
}
pre code {
  white-space: pre-wrap; /* 保留换行和空格 */
  word-break: break-all; /* 长单词换行 */
}
</style>
<style scoped lang="scss">
@import url("@/assets/static/reset.css");

.chat-gpt {
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    background-color: #f6faff;
    z-index: 1000;

    .chat-bj {
        position: absolute;
        top: 64px;
        left: 0;
        z-index: 0;
        height: auto;
        width: 100vw;
    }
}

.chat-list {
    width: 55.5rem;
    height: calc(100vh - 6.25rem - 4.5rem - 4rem);
    margin: 0 auto;
    margin-bottom: 1rem;
    position: relative;
    z-index: 4;
    padding-top: 5.1rem;
    overflow-y: scroll;
    padding-right: 0;

    &:hover::-webkit-scrollbar-thumb {
        background-color: rgba($color: #e8eeff, $alpha: 1);
    }

    /* 垂直滚动条样式 */
    /* 宽度 */
    &::-webkit-scrollbar {
        width: 0.25rem;
    }

    /* 背景色 */
    &::-webkit-scrollbar-track {
        background-color: rgba($color: #ffffff, $alpha: 0);
    }

    /* 滑块颜色 */
    &::-webkit-scrollbar-thumb {
        background-color: rgba($color: #e8eeff, $alpha: 0);
        border-radius: 4px;
    }

    .chat-msg-style {
        display: flex;
        // justify-content: space-between;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 3.25rem;

        .avatar {
            width: 2rem;
            height: 2rem;
            border-radius: 2rem;
            user-select: none;
            object-fit: cover;
        }

        .msg {
            margin-left: 1rem;
            max-width: 52.25rem;
            min-width: 52.25rem;
            box-sizing: border-box;
        }

        &:last-child {
            margin-bottom: 0 !important;
        }
    }

    .user-msg {
        margin-bottom: 1.5rem;
        align-items: center;

        .msg {
            font-size: 1rem;
            color: #26244c;
            line-height: 1.5rem;
        }
    }

    .xzgpt-msg {
        .msg {
            background-color: #ffffff;
            border-radius: 0.525rem;
            padding: 1.5rem 1.875rem;
            line-height: 1.8rem;
        }
    }

    .wt-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;

        .wt-item {
            cursor: pointer;
            width: 23.9rem;
            height: 5.625rem;
            border-radius: 0.25rem;
            background: #f6f8fd;
            margin-bottom: 1rem;
            box-sizing: border-box;
            padding: 1rem 1.68rem;

            .wt-title {
                font-size: 1rem;
                color: #333333;
                padding-bottom: 0.4rem;
                display: flex;
                align-items: center;

                img {
                    width: 20px;
                    height: 20px;
                    margin-right: 8px;
                }
            }

            .wt-text {
                font-size: 14px;
                color: #999999;
                line-height: 1.5;
                /* 强制文本在一行内显示 */
                white-space: nowrap;
                /* 隐藏超出容器的内容 */
                overflow: hidden;
                /* 用省略号显示被隐藏的内容 */
                text-overflow: ellipsis;
            }

            &:hover {
                background-color: #e9ecfb;

                .wt-title {
                    color: #4955f5;
                }

                .wt-text {
                    color: #4955f5;
                }
            }
        }
    }
}

.app-code {
    display: flex;
    justify-content: space-between;

    img {
        display: block;
        width: 48%;
        height: 96%;
    }
}

.app-code-text {
    display: flex;
    align-items: center;

    div {
        width: 50%;
        text-align: center;
        color: #666666;
        font-size: 10px;
    }
}

.ask-number {
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    height: 32px;
    line-height: 32px;
    background: #ffffff;
    border: 1px solid #e1e1e1;
    border-radius: 32px;
    padding-left: 18px;
    padding-right: 18px;
    margin: 0 26px;
    display: flex;
    justify-content: space-between;

    .text1 {
        font-size: 10px;
        color: #666666;
    }

    .num {
        color: #fa5151;
    }

    .goLink {
        margin-left: 12px;
        cursor: pointer;
        font-weight: 400;
        font-size: 12px;
        color: #1c87f3;
    }
}

.stop-text {
    color: rgba(5, 7, 59, 0.5);
    font-size: 0.9rem;
}

.stop-message {
    position: absolute;
    left: 0;
    z-index: 10;
    color: #4955f5;
    cursor: pointer;
    font-family: PingFangSC-Medium;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;

    &:hover {
        opacity: 0.5;
    }
}

.stop-div {
    position: absolute;
    left: 0;
    z-index: 10;
}

.interactive-line {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 1rem;
    position: relative;

    .text {
        font-size: 0.875rem;
        color: #9e9e9e;

        span {
            color: #1c87f3;
            cursor: pointer;
            border-bottom: #1c87f3 1px solid;
            user-select: none;
        }
    }

    i {
        font-size: 1.25rem;
        color: #858698;
        margin-left: 1.6rem;
        cursor: pointer;
        user-select: none;
    }

    img {
        width: 1.4rem;
        height: 1.4rem;
        cursor: pointer;
        margin-left: 1.4rem;
        user-select: none;
    }
}

.reference-list {
    margin-left: 1rem;

    .xiala {
        width: 36px;
        height: 19px;
        background: #FFFFFF;
        border-radius: 4px;
        margin-top: 20px;
        margin-left: 106px;
        text-align: center;
    }

    >div {
        cursor: pointer;

        :hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-color: #999;
        }

        span:hover {
            text-decoration: underline;
        }

        :active {
            transform: translateY(1px);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
        }
    }

    .reference-item {
        margin-top: 20px;
        height: 46px;
        background: #FFFFFF;
        border-radius: 10px;
        padding: 0 15px;
        display: flex;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;

        span {
            max-width: 400px;
            font-size: 16px;
            color: #26244C;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        i {
            color: #333333;
            font-size: 16px;
            margin-left: 20px;
        }
    }
}

.chat-input {
    width: 55.5rem;
    height: 6.25rem;
    display: flex;
    justify-content: flex-end;
    margin: 0 auto;
    position: relative;
    z-index: 10;

    .nologin {
        width: 52.25rem;
        height: 6.25rem;
        background-color: #ffffff;
        border-radius: 0.625rem;
        line-height: 6.25rem;
        text-align: center;
        color: #8f8ea1;
        font-size: 1rem;

        span {
            color: #1c87f3;
            border-bottom: 1px solid #1c87f3;
            cursor: pointer;
        }
    }

    .submit {
        width: 45px;
        height: 45px;
        line-height: 45px;
        text-align: center;
        background-color: #1c87f3;
        border-radius: 45px;
        font-size: 30px;
        color: #ffffff;
        cursor: pointer;
        position: absolute;
        right: 0.875rem;
        bottom: 0.875rem;
        user-select: none;

        &:hover {
            opacity: 0.92;
        }

        &:active {
            opacity: 0.8;
        }
    }

    &::v-deep .el-textarea__inner {
        border: none;
        font-size: 1rem;
        font-weight: 300;
        color: #8f8ea1;
        width: 52.5rem;
        height: 6.25rem;
        box-sizing: border-box;
        padding: 1rem 2.2rem;
        padding-right: 6.5rem;
        color: #333333;
        border: 1px solid #ffffff;

        &:focus {
            border: 1px solid #1c87f3;
        }
    }

    &::v-deep .el-textarea {
        width: auto;
        box-shadow: 0px 2px 4px 0px #d0ddff;
        border-radius: 10px;
    }
}

.chat-header {
    height: 4rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 2.75rem;
    background-color: rgba($color: #ffffff, $alpha: 0.5);
    position: relative;
    z-index: 5;

    .gnfk {
        display: flex;
        align-items: center;
        padding-right: 10px;

        img {
            padding-right: 6px;
        }
    }

    .left {
        .left-log {
            width: 1.875rem;
            height: 1.875rem;
            padding-right: 0.5rem;
        }

        i {
            font-weight: 700;
            font-size: 1.45rem;
            color: #2c2c2c;
            padding-right: 0.75rem;
        }

        display: flex;
        align-items: center;
        font-size: 1.25rem;
        font-weight: 700;
        color: #1c87f3;
        cursor: pointer;
    }

    .right {
        cursor: pointer;

        i {
            padding-right: 0.12rem;
            font-size: 1.1rem;
        }

        img {
            width: 2rem;
            height: 2rem;
            border-radius: 2rem;
            margin-left: 1.8rem;
            object-fit: cover;
        }

        display: flex;
        align-items: center;
        color: #333333;
        font-size: 0.875rem;
    }
}

.chat-footer {
    height: 4.5rem;
    line-height: 4.5rem;
    text-align: center;
    color: #9c9ac4;
    font-size: 0.75rem;
}

.typewriter {
    margin: 0;
    font-family: monospace;
    // white-space: pre;
    overflow: hidden;
    animation: typewriter 1s steps(30) infinite;
    font-size: 1.2rem;
}

@keyframes typewriter {
    0% {
        text-indent: -100%;
    }

    100% {
        text-indent: 100%;
    }
}

.goumai {
    .comboList {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .but {
        width: 234px;
        height: 47px;
        background: #1c87f3;
        border-radius: 82px;
        color: #ffffff;
        text-align: center;
        line-height: 47px;
        margin: 40px auto 0;
        user-select: none;
        cursor: pointer;

        &:hover {
            opacity: 0.8;
        }

        &:active {
            opacity: 0.9;
        }
    }

    .xieyi {
        font-size: 14px;
        color: #999999;
        text-align: center;
        margin-top: 40px;

        a {
            color: #1c87f3;
        }
    }
}

.combo-item-active {
    border-color: #ff8b55 !important;
    background-color: #fff4ea;
}

.combo-item {
    width: 148px;
    height: 142px;
    border-radius: 10px;
    border: 1px solid #a5a5a5;
    text-align: center;
    // margin: 0 30px;
    position: relative;
    user-select: none;
    cursor: pointer;

    img {
        width: 64px;
        height: 26px;
        position: absolute;
        top: -14px;
        left: -2px;
    }

    .num {
        font-weight: 500;
        font-size: 30px;
        color: #333333;
        margin-top: 18px;

        span {
            font-size: 14px;
        }
    }

    .tj {
        font-weight: 500;
        font-size: 21px;
        color: #666666;
        margin-top: 6px;

        span {
            color: #fa5151;
        }
    }

    .yj {
        margin-top: 10px;
        font-size: 14px;
        color: #999999;
        text-decoration-line: line-through;
    }
}

.payment {
    margin-top: 43px;
    padding: 0 30px;
    width: 210px;
    height: 68px;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #ececec;
    font-size: 18px;

    &.paymentCurrent {
        box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.1);
    }

    .selectIcon {
        width: 25px;
        height: 25px;
    }

    .icon {
        margin: 0 10px;
        width: 40px;
        height: 40px;
    }
}

.wxPay-price {
    text-align: center;
    font-size: 36px;
    font-weight: 500;
    color: #ff5967;
}

.wxPay ::v-deep .el-dialog__body {
    padding: 0 0 30px !important;
}

.ErwmToast {
    text-align: center;

    .erwm {
        display: flex;
        align-items: center;
        justify-content: center;

        .iframe {
            width: 333px;
            height: 333px;
            border-width: 0;
        }
    }

    .icon {
        margin-right: 5px;
        width: 30px;
        height: 30px;
    }
}

.main {
    display: flex;
    width: 100%;
}

.session {
    position: relative;
    z-index: 100;
    min-width: 335px;
    width: 335px;
    background-color: rgba($color: #ffffff, $alpha: 0.5);
    padding-top: 40px;

    .new-session {
        margin: 0 auto;
        text-align: center;
        width: 280px;
        height: 50px;
        line-height: 50px;
        background: #358cff;
        box-shadow: 0px 8px 15px 0px rgba(53, 140, 255, 0.3);
        border-radius: 127px;
        font-size: 16px;
        color: #ffffff;
        cursor: pointer;
        user-select: none;

        &:hover {
            opacity: 0.9;
        }

        &:active {
            opacity: 0.8;
        }

        i {
            font-size: 20px;
            padding-right: 8px;
            position: relative;
            top: 2px;
        }
    }
}

.session-list {
    width: 280px;
    height: calc(100vh - 4rem - 40px - 50px - 36px - 66px);
    margin: 36px auto 10px;
    overflow-y: auto;
    padding-right: 2px;

    &:hover::-webkit-scrollbar-thumb {
        background-color: rgba($color: #e8eeff, $alpha: 1);
    }

    /* 垂直滚动条样式 */
    /* 宽度 */
    &::-webkit-scrollbar {
        width: 0.25rem;
    }

    /* 背景色 */
    &::-webkit-scrollbar-track {
        background-color: rgba($color: #ffffff, $alpha: 0);
    }

    /* 滑块颜色 */
    &::-webkit-scrollbar-thumb {
        background-color: rgba($color: #e8eeff, $alpha: 0);
        border-radius: 4px;
    }

    .session-item-active {
        background-color: #ffffff;
    }

    .session-item {
        height: 48px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        padding: 0 13px;
        cursor: pointer;

        &:hover .el-icon-delete {
            display: inline-block !important;
        }

        .icon {
            width: 18px;
            height: 18px;
            margin-right: 6px;
            display: block;
        }

        div {
            width: 210px;
            font-size: 14px;
            color: #333333;
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 隐藏超出元素框的内容 */
            text-overflow: ellipsis;
            /* 当内容溢出时显示省略号 */
            height: 48px;
            line-height: 48px;
        }

        i {
            font-size: 16px;
        }

        .el-icon-chat-dot-round {
            padding-right: 6px;
            color: #358cff;
        }

        .el-icon-delete {
            padding-left: 6px;
            color: #333333;
            display: none;
        }

        &:hover {
            background-color: rgb(217, 236, 255) !important;
        }
    }
}

.gpt_vip_time {
    text-align: center;
    font-size: 12px;
    line-height: 1.5;

    p {
        color: #333333;
        font-size: 14px;
    }

    color: #999999;
}

::v-deep .el-dropdown-menu__item {
    padding: 0 10px;
    text-align: center;
}

.new-wt-list {
    font-size: 0.875rem;
    color: #9e9e9e;
    // padding-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.new-wt {
    position: fixed;
    right: calc((100vw - 335px - 55.5rem) / 2);
    bottom: 18rem;
    z-index: 100;
    cursor: pointer;

    i {
        color: #4955f5;
        cursor: pointer;

        &:hover {
            font-weight: 500;
        }
    }
}

.wt-list2-carousel {
    width: 52.5rem;
    height: 108px;
    position: fixed;
    right: calc((100vw - 335px - 55.5rem) / 2);
    z-index: 5;
    bottom: 10.75rem;
}

.wt-list2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 52.5rem;
    width: 52.5rem;

    .wt-item2 {
        cursor: pointer;
        width: 260px;
        height: 103px;
        background: #ffffff;
        box-shadow: 0px 2px 4px 0px #d0ddff;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 1.7rem 1.68rem;

        .wt-title {
            font-size: 1rem;
            color: #333333;
            padding-bottom: 0.55rem;
            display: flex;
            align-items: center;

            img {
                width: 20px;
                height: 20px;
                margin-right: 8px;
            }
        }

        .wt-text {
            font-size: 14px;
            color: #999999;
            line-height: 1.5;
            /* 强制文本在一行内显示 */
            white-space: nowrap;
            /* 隐藏超出容器的内容 */
            overflow: hidden;
            /* 用省略号显示被隐藏的内容 */
            text-overflow: ellipsis;
        }

        &:hover {
            background-color: #e9ecfb;

            .wt-title {
                color: #4955f5;
            }

            .wt-text {
                color: #4955f5;
            }
        }
    }
}

::v-deep .bilibili-user-con {
    top: 4rem;
    right: 2.75rem;
}

::v-deep .box-avatar {
    height: 40px !important;
}

::v-deep .avatar-img {
    width: 40px !important;
    height: 40px !important;
}

@keyframes avatarFadeLarge2 {
    0% {
        transform: scale(1) translateY(0) translate(0);
    }

    60% {
        // opacity: 1;
    }

    100% {
        // opacity: 0;
        transform: scale(2.5) translate(-12px, 16px);
    }
}

::v-deep .box-avatar-active {
    animation: avatarFadeLarge2 0.35s both !important;
}
</style>
<style lang="scss">
.gpt-dialog {
    .el-dialog__header {
        background: #f1f1f1;
    }
}
</style>